<template>
	<view class="content">
		<image class="login" src="/static/logo-icon.png" mode=""></image>

		<view class="title">
			<text>你好，</text>
			<text>欢迎使用「</text>
			<text>点击一键登录注册使用</text>
		</view>

		<button class="bt-login"
			open-type="getPhoneNumber"
			@getphonenumber='getPhoneNumber'>注册登陆</button>

		<button class="return-btn"
			@click="swPath"
			v-if="!spread_id">
			暂不登录</button>

		<view class="privacy">
			<radio :checked="current" @click="current = !current" style="transform:scale(0.7)" color="#F4483A " />
			<text @click="privacyContract">我已经详细阅读 <text style="color: #F6941D;">《 星颉赛孚用户协议 》</text></text>
		</view>

		<image class="logo-bj" src="/static/logo-bj.png" mode=""></image>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../api/api.js'
	import { useCounterStore } from '../../stores/user.js';
	const useinfo = useCounterStore()

	const code = ref('')
	const code2 = ref('')
	const spread_id = ref('')
	const current = ref(false)

	onLoad((option) => {
		uni.login({
			success: res => {
				if (res.errMsg !== "login:ok") return uni.$showMsg()
				code.value = res.code
			}
		})

		if (option.id) {
			spread_id.value = option.id
		}
	})

	function getPhoneNumber(e) {
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			code2.value = e.detail.code
			login()
		} else {
			uni.$showMsg('您取消了登录!')
		}
	}

	function login() {
		if (!current.value) return uni.$showMsg("未选择星颉赛孚用户协议")

		uni.$showMsg('登录中!', 'loading', 100000)
		let obj = {
			code: code.value,
			code2: code2.value,
		}
		if (spread_id.value) obj.spread_id = spread_id.value
		api.userLogin.login(obj).then(res => {
			uni.$showMsg('登录成功', 'success')
			uni.setStorageSync('userinfo', res.data)
			useinfo.userinfo = res.data
			setTimeout(() => {
				api.redirectTo('/pages/home/home')
			}, 1000)
		})
	}

	function swPath() {
		api.redirectTo('/pages/home/home')
	}

	function privacyContract() {
		wx.openPrivacyContract({
			success: () => {}, // 打开成功
			fail: () => {}, // 打开失败
			complete: () => {}
		})
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 100vh;

		.login {
			width: 120rpx;
			height: 120rpx;
			padding: 200rpx 0 32rpx 52rpx;
		}

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			display: flex;
			flex-direction: column;
			padding-left: 52rpx;

			text {
				margin-bottom: 20rpx;
			}

			>text:nth-child(3) {
				font-weight: 500;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.bt-login {
			width: 646rpx;
			height: 102rpx;
			line-height: 102rpx;
			border-radius: 52rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 100rpx;
			background-image: linear-gradient(90deg, #FF9E4C 0%, #FF7316 100%);
		}

		.return-btn {
			margin-top: 20rpx;
			width: 646rpx;
			height: 102rpx;
			line-height: 102rpx;
			border: 2rpx solid #FF9E4C;
			border-radius: 52rpx;
			color: #FF9E4C;
			font-size: 32rpx;
		}

		.privacy {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;

			>text {
				font-size: 24rpx;
				line-height: 1;
			}
		}

		.logo-bj {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 600rpx;
			z-index: -1;
		}
	}
</style>